<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <style>
        body {
            margin:0;
            padding:0;
            font-family:sans-serif;
            background:#2C2255;
            background:url(../image/水漫漫.jpg);
            background-repeat: no-repeat;
            background-size:100%;
            font-size: 20px;
            font-family:STXingkai;
            color: #59ec0a;
        }
        a{
            text-decoration:none;
        }
        button{
            margin:10px;
        }

        td{
            width:200px;
            height:80px;
        }
    </style>
</head>
<body>
<div id="orderVue">
    <a href="permission.html">返回</a>
        <table id="OrderForm-table">
            <div class="toolbar-div">
                售货订单日期：<input type="datetime-local" id="XHOrderDateMin" name="">~
                取货日期：<input type="datetime-local" id="GDDateMax" name="">
                <button type="button" @click="search" class="btn-warning btn btn-lg">搜索</button>
                <button  class="btn btn-danger btn-lg" @click="batchPass()">批量通过</button>
                <button  class="btn btn-danger btn-lg" @click="batchNoPass()">批量未通过</button>
            </div>
            <tr>
                <th><input id="checkAll" type="checkbox" @click="allCheck"></th>
                <th>售货订单编号</th>
                <th>售货订单日期</th>
                <th>取货日期</th>
                <th>取货地点</th>
                <th>收款方式编号</th>
                <th>收款最迟日期</th>
                <th>货币种类编号</th>
                <th>预付金额</th>
                <th>货物总额</th>
                <th>税率总额</th>
                <th>赊欠金额</th>
                <th>运调费用</th>
                <th>业务员编号</th>
                <th>财务员编号</th>
                <th>收款收据</th>
                <th>客户信息</th>
                <th>货物种类数</th>
                <th>总净高额</th>
                <th>订货数量</th>
                <th>订货单价</th>
                <th>物质明细表</th>
                <th>物质价格表</th>
                <th>物质净高价</th>
                <th>审核结果</th>
                <th>备注</th>
                <th>操作</th>
            </tr>
            <tr v-for="Of in list">
                <td><input class="check" type="checkbox" :value="Of.xhorderNo" @click="isCheckAll"></td>
                <td>{{Of.xhorderNo}}</td>
                <td>{{Of.xhorderDate}}</td>
                <td>{{Of.gddate}}</td>
                <!--            取货地点-->
                <td>{{Of.gdaddress}}</td>
                <td v-if="Of.revCurrencyModeNo == 1">
                    现金
                </td>
                <td v-if="Of.revCurrencyModeNo == 2">
                    支付宝
                </td>
                <td v-if="Of.revCurrencyModeNo == 3">
                    微信
                </td>
                <td>{{Of.revCurrencyLastDate}}</td>
                <td v-if="Of.currencyNo == 1">
                    人民币
                </td>
                <td v-if="Of.currencyNo == 2">
                    美元
                </td>
                <td v-if="Of.currencyNo == 3">
                    欧元
                </td>
                <td v-if="Of.currencyNo == 4">
                    日元
                </td>
                <td v-if="Of.currencyNo == 5">
                    韩元
                </td>
                <td v-if="Of.currencyNo == 6">
                    港币
                </td>
                <td v-if="Of.currencyNo == 7">
                    英镑
                </td>
                <!--            预付金额-->
                <td>{{Of.prePayCurrency}}</td>
                <td>{{Of.goodsSumCurrency}}</td>
                <td>{{Of.taxSumCurrency}}</td>
                <td>{{Of.creditCurrency}}</td>
                <!--            运调费用-->
                <td>{{Of.addtionalCurrency}}</td>
                <td>{{Of.traderNo}}</td>
                <td>{{Of.treasurerNo}}</td>

                <td>{{Of.recCurrencyRcept==1?"是":"否"}}</td>
                <td>{{Of.customerNo}}</td>
                <td>{{Of.goodsClassCounts}}</td>
                <!--总净高额-->
                <td>{{Of.sumProfitCurrency}}</td>
                <!--            订货数量-->
                <td>{{Of.itemsQty}}</td>
                <td>{{Of.itemsPrice}}</td>
                <td>{{Of.itemsInfoNo}}</td>
                <td>{{Of.itemsNo}}</td>
                <td>{{Of.itemsProfitPrice}}</td>
                <td v-if="Of.isCheck == 3">
                    正在审核中
                </td>
                <td><input type="text" style="border:none;
                background-color:transparent;color: #0ff;text-align: center" v-model="Of.checkRes"></td>
                <td>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" style="width: 70px" @click="pass(Of)">通过</button>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" style="width: 70px" @click="noPass(Of)">未通过</button>
                </td>

            </tr>
        </table>
        <!--            分页区域-->
        <div class="pagination-div">
            <ul class="pagination" id="page-ul">
                <li class="page-item">
                    <a class="page-link" href="javascript:void(0);" @click="cutPage(1)">首页</a>
                </li>
                <li class="page-item" v-if="page.pageNow!=1">
                    <a class="page-link" href="javascript:void(0);"
                       @click="cutPage(page.pageNow-1)">{{page.pageNow-1}}</a></li>
                <li class="page-item active">
                    <a class="page-link" href="javascript:void(0);">{{page.pageNow}}</a>
                </li>
                <li class="page-item" v-if="page.pageNow!=page.pageTotal">
                    <a class="page-link" href="javascript:void(0);"
                       @click="cutPage(page.pageNow+1)">{{page.pageNow+1}}</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="javascript:void(0);"
                       @click="cutPage(page.pageTotal)">尾页</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="javascript:void(0);">共有{{page.count}}条数据</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="javascript:void(0);">共有{{page.pageTotal}}页</a>
                </li>
            </ul>
        </div>
</div>
<!--引入js文件-->
<script type="text/javascript" src="../css/jquery-3.4.1.js"></script>
<script src="../bootstrap/js/bootstrap.js" ></script>
<script src="../vue/vue.js" charset="utf-8"></script>
<script type="text/javascript" src="../css/my.js"></script>
<script>
    let OrderFormTabVue;

    // 查询物质 需要接受一个当前页参数
    function selOrderForm(pageNow, XHOrderDateMin, GDDateMax) {
        let map = [];
        $.ajax({
            type: "post",
            url: "../OrderForm/selOrderFormForTreasurer",
            dataType: "json",
            data: {pageNow: pageNow, pageCount: 5, xHOrderDateMin: XHOrderDateMin, gDDateMax: GDDateMax},
            async: false,
            success: function (data) {
                map = data;
            }
        });
        return map;
    }

    /*创建一个map装查询到的第一页的数据*/
    let map = selOrderForm(1, "", "");
    //加载分页数据
    OrderFormTabVue = new Vue({
        el: '#orderVue',
        data: {
            list: map.list,// 展示表格
            page: map, // 用于分页
        },
        methods: {

            //切换页方法 参数为当前按钮所代表的对应页
            cutPage: function (pageNow) {
                let XHOrderDateMin = $("#XHOrderDateMin").val();
                let GDDateMax = $("#GDDateMax").val();
                //查询要切换页的数据。把结果从新给表格赋值
                OrderFormTabVue.list = selOrderForm(pageNow, XHOrderDateMin, GDDateMax).list;
                //把分页的vue重新赋值。
                OrderFormTabVue.page.pageNow = pageNow;
            },
            //条件查询方法
            search: function () {
                let XHOrderDateMin = $("#XHOrderDateMin").val();
                let GDDateMax = $("#GDDateMax").val();
                // 点击搜索按钮，获取搜索内容，进行查询
                OrderFormTabVue.list = selOrderForm(1, XHOrderDateMin, GDDateMax).list;
                OrderFormTabVue.page = selOrderForm(1, XHOrderDateMin, GDDateMax);
            },
            allCheck: function () {
                eventHub.$emit("allCheck", null);
            },
            isCheckAll: function () {
                eventHub.$emit("isCheckAll", null);
            },
            //批量通过
            batchPass: function () {
                let ids = "";
                // 获取复选框中的值 id值 使用类选择器each()遍历方法
                $(".check").each(function () {
                    // 对所有符合该选择器的元素进行操作。 this 复选框.value
                    // 判断该复选框是否选中
                    if (this.checked) {
                        ids += this.value + ",";
                    }
                })
                // ajax把拼接的id传入到后台
                $.ajax({
                    type: "post",
                    url: "../OrderForm/batchPass",
                    data: {ids: ids},
                    dataType: "json",
                    success: function (data) {
                        // 删除完成后重新查询第一页
                        alert(data.message)
                        window.location.reload();
                    }
                });
            },
            //批量未通过
            batchNoPass: function () {
                let ids = "";
                // 获取复选框中的值 id值 使用类选择器each()遍历方法
                $(".check").each(function () {
                    // 对所有符合该选择器的元素进行操作。 this 复选框.value
                    // 判断该复选框是否选中
                    if (this.checked) {
                        ids += this.value + ",";
                    }
                })
                // ajax把拼接的id传入到后台
                $.ajax({
                    type: "post",
                    url: "../OrderForm/batchNoPass",
                    data: {ids: ids},
                    dataType: "json",
                    success: function (data) {
                        // 删除完成后重新查询第一页
                        alert(data.message)
                        window.location.reload();
                    }
                });
            },
            //通过方法 可携带备注信息
            pass: function (Of) {
                $.ajax({
                    type: "post",
                    url: "../OrderForm/pass",
                    data: Of,
                    dataType: "json",
                    success: function (data) {
                        alert(data.message);
                        window.location.reload();
                    }
                });
            },
            //未通过方法 可携带备注信息
            noPass: function (Of) {
                $.ajax({
                    type: "post",
                    url: "../OrderForm/noPass",
                    data: Of,
                    dataType: "json",
                    success: function (data) {
                        alert(data.message);
                        window.location.reload();
                    }
                });
            }
        }
    });


</script>
</body>
</html>